<template>
  <h1>App</h1>
  <ul>
    <li>
      <RouterLink to="/home">Home</RouterLink>
    </li>
    <li>
      <RouterLink to="/home?name=jack&age=20">Home?name=jack&age=20</RouterLink>
    </li>
    <li>
      <RouterLink to="/home?name=lili&age=21">Home?name=lili&age=21</RouterLink>
    </li>
    <li>
      <RouterLink to="/shop/100">Shop/100</RouterLink>
    </li>
    <li>
      <RouterLink to="/shop/200">Shop/200</RouterLink>
    </li>
    <li>
      <RouterLink to="/ha/ha">NotFound</RouterLink>
    </li>
  </ul>
  <RouterView></RouterView>
</template>

<script setup>

import { watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
/*
watch(() => route.params, (newValue, oldValue) => {
  console.log(newValue);
  console.log(oldValue);
});

watch(() => route.params.id, (newValue, oldValue) => {
  console.log(newValue);
  console.log(oldValue);
});

watch(() => route.query, (newValue, oldValue) => {
  console.log(newValue);
  console.log(oldValue);
});

watch(() => route.query.name, (newValue, oldValue) => {
  console.log(newValue);
  console.log(oldValue);
});
*/
</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>